<template>
  <div>
    <!-- 详情 -->
    <header>
      <el-tabs
        v-model="tabName"
        class="data three demo-tabs"
        @tab-change="handleChangeTag"
        type="card"
        stretch
      >
        <el-tab-pane label="检查" name="check"> </el-tab-pane>
        <el-tab-pane label="方案" name="scheme"> </el-tab-pane>
        <el-tab-pane label="报告列表" name="report"> </el-tab-pane>
        <el-tab-pane label="销售" name="sales"> </el-tab-pane>
      </el-tabs>

      <!-- 检查项 -->
      <region-item
        v-if="tabName == 'check' && flag"
        class="my-[0.2rem]"
        v-model="detailForm"
      />

      <div
        class="w-full flex justify-end mb-[0.2rem]"
        v-if="tabName == 'check'"
      >
        <el-button
          type="primary"
          class="h-[1.5rem] text-[0.8rem]"
          @click="handleOneClickSend"
          >一键下发</el-button
        >
        <el-button
          type="primary"
          class="h-[1.5rem] text-[0.8rem]"
          @click="handleChangeDevice"
          >选择设备检查数据</el-button
        >
      </div>
    </header>

    <el-scrollbar
      :style="{
        height: tabName == 'check' ? 'calc(99vh - 9rem)' : 'calc(100vh - 7rem)',
      }"
      class="mt-[0.2rem] pr-2"
    >
      <div v-if="tabName == 'check'">
        <PersonalInformation v-model="detailForm" />
        <RegionData v-if="flag" v-model="detailForm" />
      </div>

      <SchemePage
        v-if="tabName == 'scheme'"
        :heightNum="9"
        :checkId="detailForm.id"
        ref="SchemeRef"
      />

      <ReportList
        :checkId="detailForm.id"
        :detailForm="detailForm"
        :heightNum="7"
        v-if="tabName == 'report'"
      />

      <CheckOrderList v-if="tabName == 'sales'" :detailForm="detailForm" />
    </el-scrollbar>

    <el-drawer
      v-model="change_device_drawer"
      destroy-on-close
      size="85%"
      title="选择设备检查数据"
    >
      <ChangeDeviceData />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import RegionItem from "./RegionItem.vue"; // 检查项
import PersonalInformation from "./PersonalInformation.vue"; // 个人信息
import ChangeDeviceData from "@/components/ChangeDeviceCheckData.vue"; // 选择设备下发
import RegionData from "./RegionData/index.vue";
import SchemePage from "@/view/ManageMode/HomePage/component/SchemePage/index.vue";
import ReportList from "@/view/ManageMode/HomePage/component/ReportList/index.vue";
import CheckOrderList from "./CheckOrderList.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  QueryChecklistInfoById,
  SendMessageToDevices,
} from "../../../../../wailsjs/go/api/ReportApi.js";

onMounted(() => {
  getDetail();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const userStore = useUserStore();
const { opticianEditStatus } = storeToRefs(userStore);

const tabName = ref("check"); // tab标签索引
const handleChangeTag = (key) => {
  tabName.value = key;
};

const flag = ref(false); // 等待获取详情之后才显示区域数据页面
const detailForm = ref({});
// 获取详情数据
const getDetail = async () => {
  handleApiResponse(() => QueryChecklistInfoById(props.detailForm.id)).then(
    (res) => {
      if (res.code == 0) {
        detailForm.value = res.data || {};
        setTimeout(() => {
          flag.value = true;
        }, 200);
      }
    }
  );
};

// 1.一键下发
const handleOneClickSend = () => {
  ElMessageBox.confirm("你确定要下发数据？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let projectIds = detailForm.value.projectList.map((item) => item.id);
    handleApiResponse(() =>
      SendMessageToDevices({
        projectIdList: projectIds,
        scan: `{type=inspect&&listId=${detailForm.value.id}&&birthday=${detailForm.value.birthday}&&archivesCode=${detailForm.value.medicalCardNumber}&&code=${detailForm.value.code}&&name=${detailForm.value.relationName}&&phone=${detailForm.value.phone}&&sex=${detailForm.value.sex}&&age=${detailForm.value.age}}`,
      })
    ).then((res) => {
      if (res.code == 0) {
        ElMessage.success("下发成功");
      }
    });
  });
};

// 2.选择设备检查数据
const change_device_drawer = ref(false);
const outCodeList = ref([]); // 设备编码/外码
const handleChangeDevice = () => {
  outCodeList.value = [];
  let list = [];
  detailForm.value.projectList.forEach((item) => {
    item.deviceList.forEach((item2) => {
      if (item2.isAuthentic == 1) {
        list.push({ ...item2, projectId: item.id });
      }
    });
  });

  outCodeList.value = list.filter(
    (item, index, self) =>
      index === self.findIndex((t) => t.deviceSn === item.deviceSn)
  );
  change_device_drawer.value = true;
};
</script>

<style scoped lang="scss">
.demo-tabs :deep(.el-tabs__header) {
  @apply mb-0;
}
.demo-tabs :deep(.el-tabs__item.is-top.is-active) {
  color: white !important;
  background-color: var(--theme-color) !important;
}
.demo-tabs :deep(.el-tabs__item.is-top) {
  background-color: #c9d6df !important;
  @apply font-bold;
}
</style>